<template>
    <div>
        <div
            class="more theme-more"
            :data="backgroundColorGet"
            @mouseover="mouseover"
        >
            ...
        </div>
        <div
            v-if="showMore"
            class="more-list"
            @mouseover="mouseover"
            @mouseout="mouseout"
        >
            <div @mouseover="mouseover" @click="aaa">1</div>
            <div @mouseover="mouseover">2</div>
            <div @mouseover="mouseover">3</div>
        </div>
    </div>
</template>

<script>
import { mapGetters } from 'vuex';

export default {
    name: 'More',
    components: {
    },
    data() {
        return {
            showMore: false,
            moreList: [
                {
                    n1: '111',
                },
                {
                    n2: '222',
                },
                {
                    n3: '333',
                },
            ],
        };
    },
    computed: {
        ...mapGetters(['backgroundColorGet'])
    },
    methods: {
        mouseover() {
            this.showMore = true;
        },
        mouseout() {
            this.showMore = false;
        },
        aaa() {
            alert(111);
        },
    },
};
</script>

<style lang="scss" scoped>
.more {
    position: fixed;
    right: -50px;
    bottom: -50px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: #000;
    cursor: pointer;
    //   z-index: 2;
}
.more-list {
    position: fixed;
    right: -125px;
    bottom: -125px;
    width: 250px;
    height: 250px;
    border-radius: 50%;
    //   background: #ccc;
    // cursor: pointer;
    //   z-index: 1;
    div {
        width: 40px;
        height: 40px;
        position: absolute;
        background-color: red;
        border-radius: 50%;
        line-height: 40px;
        text-align: center;
        left: 50%;
        margin-left: -20px;
        cursor: pointer;
    }
    div:nth-of-type(1) {
        transform: rotate(340deg);
        transform-origin: 20px 100px;
    }
    div:nth-of-type(2) {
        transform: rotate(315deg);
        transform-origin: 20px 125px;
    }
    div:nth-of-type(3) {
        transform: rotate(285deg);
        transform-origin: 20px 125px;
    }
}
</style>
